.data-table {
  height: 100vh;
  display: flex;
  flex-direction: column;

  &__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: none;
    box-shadow: none;
    
    .ant-card-head {
      border-bottom: 1px solid #f0f0f0;
      padding: 12px 16px;
      min-height: auto;
    }
    
    .ant-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  &__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }

  &__count {
    font-size: 12px;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
  }

  &__filters {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    
    &-content {
      width: 100%;
    }
  }

  &__search {
    width: 100%;
    
    .ant-input {
      border-radius: 6px;
    }
  }

  &__filter-selects {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  &__filter-select {
    flex: 1;
    
    .ant-select-selector {
      border-radius: 6px;
    }
  }

  &__content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  &__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
  }

  &__table {
    flex: 1;
    
    .ant-table {
      height: 100%;
      
      .ant-table-container {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      
      .ant-table-header {
        flex-shrink: 0;
      }
      
      .ant-table-body {
        flex: 1;
        overflow-y: auto;
        
        &::-webkit-scrollbar {
          width: 6px;
        }
        
        &::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 3px;
          
          &:hover {
            background: #a8a8a8;
          }
        }
      }
    }
    
    .ant-table-thead > tr > th {
      background: #fafafa;
      font-weight: 600;
      font-size: 12px;
      padding: 8px 12px;
      border-bottom: 2px solid #f0f0f0;
    }
    
    .ant-table-tbody > tr > td {
      padding: 8px 12px;
      font-size: 12px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .ant-table-tbody > tr:hover > td {
      background: #f0f9ff;
    }
  }

  &__pagination {
    margin: 16px;
    text-align: center;
    
    .ant-pagination-item {
      border-radius: 4px;
    }
    
    .ant-pagination-total-text {
      font-size: 12px;
    }
  }

  &__id {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    background: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #e8e8e8;
  }

  &__value {
    font-weight: 600;
    color: #1890ff;
  }

  &__category {
    font-size: 11px;
    margin: 0;
    border-radius: 10px;
    padding: 2px 8px;
  }

  &__status {
    font-size: 11px;
    margin: 0;
    border-radius: 10px;
    padding: 2px 6px;
    font-weight: 500;
  }

  &__date {
    font-size: 11px;
    font-family: 'Courier New', monospace;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .data-table {
    &__table {
      .ant-table-thead > tr > th,
      .ant-table-tbody > tr > td {
        padding: 6px 8px;
        font-size: 11px;
      }
    }
    
    &__title {
      font-size: 14px;
    }
  }
}

@media (max-width: 992px) {
  .data-table {
    &__filters {
      padding: 12px;
    }
    
    &__filter-selects {
      flex-direction: column;
      gap: 8px;
    }
    
    &__filter-select {
      width: 100%;
    }
    
    &__table {
      .ant-table-thead > tr > th,
      .ant-table-tbody > tr > td {
        padding: 4px 6px;
        font-size: 10px;
      }
    }
    
    &__pagination {
      margin: 12px;
      
      .ant-pagination-total-text {
        font-size: 11px;
      }
    }
  }
}

@media (max-width: 768px) {
  .data-table {
    &__header {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }
    
    &__title {
      font-size: 13px;
    }
    
    &__count {
      font-size: 11px;
    }
    
    &__table {
      .ant-table {
        .ant-table-container {
          .ant-table-content {
            overflow-x: auto;
          }
        }
      }
      
      .ant-table-thead > tr > th {
        white-space: nowrap;
        min-width: 60px;
      }
      
      .ant-table-tbody > tr > td {
        white-space: nowrap;
      }
    }
  }
}

// 表格滚动条样式优化
.ant-table-body {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    
    &:hover {
      background: #a8a8a8;
    }
  }
  
  &::-webkit-scrollbar-corner {
    background: #f1f1f1;
  }
}